<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blog</title>
    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css?family=PT+Serif|Open+Sans" rel="stylesheet">

    <!--font-awesome CDN-->
    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <!--font-awesome-->
    <link href="styles/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="scss/utils/Main.css">
    <link rel="stylesheet" href="scss/utils/Client.css">

</head>
<body class="has-client-header has-client-nav has-client-footer">

<main role="main">
    <section class="section-blog-title">
        <div class="container">
            <div class="row">
                <div class="section-title col-xs-4">BLOG</div>
                <form action="" class="col-xs-4 col-xs-offset-4">
                    <div class="form-group">
                        <div class="input-group addon-right-transparent">
                            <input type="text" class="form-control">
                            <i class="fa fa-search input-group-addon font-rem-1-8"></i>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </section>
    <section style="margin-bottom: 30px;">
        <div class="container">
            <div class="row">
                <aside class="col-sm-3">
                    <nav class="navbar aside-collapse-navbar">
                        <div class="">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed btn-clean" data-toggle="collapse" data-target="#categories" aria-expanded="false">
                                    <span class="sr-only">Toggle navigation</span>
                                    <i class="fa fa-ellipsis-h font-rem-1-8"></i>
                                </button>
                                <a class="navbar-brand aside-title" href="#">CATEGORIES</a>
                            </div>

                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse" id="categories">
                                <ul class="list-unstyled aside-nav">
                                    <li class="active"><a href="#">All Blog Posts</a></li>
                                    <li><a href="#">Inspiration</a></li>
                                    <li><a href="#">Fashion</a></li>
                                    <li><a href="#">Shopping</a></li>
                                    <li><a href="#">Lifestyle</a></li>
                                    <li><a href="#">Photography</a></li>
                                </ul>
                            </div><!-- /.navbar-collapse -->
                        </div><!-- /.container-fluid -->
                    </nav>
                </aside>
                <div class="col-sm-9" role="contentinfo">
                    <div class="thumbnail thumbnail-clean">
                        <img src="images/client-blog.png" alt="blog cover img">
                        <div class="caption">
                            <h3 class="thumbnail-title"><a href="ClientBlogDetails.html">HELLO NICE TO MEET YOU</a></h3>
                            <div class="thumbnail-author">
                                <span>JAMMIE LANDING </span>|<span> May 15, 2017</span>
                            </div>
                            <p class="thumbnail-content"><a href="ClientBlogDetails.html">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected…</a></p>
                            <div><a href="ClientBlogDetails.html" class="btn btn-fill-default" role="button">READ MORE</a> </div>
                        </div>
                    </div>
                    <div class="thumbnail thumbnail-clean">
                        <img src="images/client-blog.png" alt="blog cover img">
                        <div class="caption">
                            <h3 class="thumbnail-title"><a href="ClientBlogDetails.html">HELLO NICE TO MEET YOU</a></h3>
                            <div class="thumbnail-author">
                                <span>JAMMIE LANDING </span>|<span> May 15, 2017</span>
                            </div>
                            <p class="thumbnail-content"><a href="ClientBlogDetails.html">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected…</a></p>
                            <div><a href="ClientBlogDetails.html" class="btn btn-fill-default" role="button">READ MORE</a> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>

<script src="lib/jquery.1.12.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>